{include file="header/index" /}
<div class="container whitebg user_management">
	<form class="form-inline mt15 mb15">
		<div class="form-group mr20">
			<input type="text" class="form-control input-min" id="tel" name="tel" value="{$search.tel}" placeholder="请输入账号">
		</div>
		<div class="form-group mr20">
			<input type="text" class="form-control input-min" id="username" name="username" value="{$search.username}" placeholder="请输入户名">
		</div>
		<div class="form-group mr20">
			<input type="text" class="form-control input-min" id="telphone" name="telphone" value="{$search.telphone}" placeholder="请输入联系人电话">
		</div>
		<div class="form-group mr20">
			<input type="text" class="form-control input-max" id="id_card" name="id_card" value="{$search.id_card}" placeholder="请输入身份证号码">
		</div>
	</form>

	<form class="form-inline mt15 mb15">
		<div class="form-group mr20">
			<label>账户状态</label>
			<select id="account_status" name="" class="form-control input-min">
				<option value="">请选择账户状态</option>
				<option value="1">正常</option>
				<option value="2">冻结</option>
			</select>
		</div>
		<div class="form-group mr20">
			<label>所属运营中心</label>
			<select id="operation" name="" onChange="move()" class="form-control input-min">
				<option value="">请选择运营中心</option>
				{volist name="operation" id="op"}
				<option value="{$op.o_id}">{$op.company_name}</option>
				{/volist}

			</select>
			<select id="administrative" name="" class="form-control input-min">
				<option value="">请选择行政中心</option>
				{volist name="administrative" id="ad"}
				<option value="{$ad.a_id}">{$ad.company_name}</option>
				{/volist}

			</select>
		</div>
		<button type="button" id="search" class="btn btn-default input-Btn">搜索</button>

		<button type="button" class="btn btn-primary fr add_newuser input-Btn">
						<a href="{:url('Customerinfo/add')}">
							<i class="glyphicon glyphicon-plus"></i>&nbsp;&nbsp;新增用户
						</a>
					</button>

	</form>

	<form id="form1" method="Post">
		<table class="table table-bordered">
			<tr>
				<th><input type="checkbox" onclick="checkAll(this)" id="all" /></th>
				<th>账号</th>
				<th>户名</th>
				<th>客户电话</th>
				<th>身份证号</th>
				<th>所属运营中心</th>
				<th>所属行政中心</th>
				<th>账户状态</th>
				<th>操作</th>
			</tr>
			<script id="list-template" type="text/html">
				{{# for(var i=0;i
				<d.length;i++){ }} <tr>
					<td><input class="select" type="checkbox" name="box" value="{{d[i].user_id}}" onclick="selectAll()" /></td>
					<td>{{d[i].telphone}}</td>
					<td>{{d[i].username}}</td>
					<td>{{d[i].telphone}}</td>
					<td>{{d[i].id_card}}</td>
					<td>{{d[i].operation_companyname}}</td>
					<td>{{d[i].administrative_companyname}}</td>
					<td>{{d[i].account_status}}</td>
					<td>
						<a href="{:url('Customerinfo/details')}?user_id={{d[i].user_id}}">查看</a>
						<a href="{:url('Customerinfo/update')}?user_id={{d[i].user_id}}">修改</a>
					</td>
					</tr>
					{{# } }}
			</script>
			<tbody id="list-content"></tbody>
		</table>
	</form>
	<div class="clearfix" style="float:right;margin: 0 auto;">
		<span class="fl mt5" id="count">共{$count}条数据</span><span id="allpage" class="fl  mr20 mt5"></span><span class="fl" id="AjaxPage"></span>
	</div>
	<!-- 加载动画 -->
	<div class="spiner-example">
		<div class="sk-spinner sk-spinner-three-bounce">
			<div class="sk-bounce1"></div>
			<div class="sk-bounce2"></div>
			<div class="sk-bounce3"></div>
		</div>
	</div>
	<div class="batchdelbtn" onclick="delmseeage('是否删除所有选中的信息')">批量删除</div>
	<div class="recyclebtn">回收站</div>
	<div class="clearfix"></div>
</div>
</body>

</html>
<script type="text/javascript">
	//table奇数行颜色
	//$(document).ready(function() {
	//$('tr:odd').addClass('active');
	//});

	Ajaxpage();

	function Ajaxpage(curr) {
		var operation = $("#operation ").val();
		var administrative = $("#administrative ").val();
		var account_status = $('#account_status').val();
		var tel = $('#tel').val();
		var username = $('#username').val();
		var telphone = $('#telphone').val();
		var id_card = $('#id_card').val();
		$.getJSON('{:url("Customerinfo/index")}', {
			page: curr || 1,
			tel: tel,
			account_status: account_status,
			username: username,
			telphone: telphone,
			id_card: id_card,
			operation_id: operation,
			administrative_id: administrative
		}, function(data) {
			//           console.log(data);

			$(".spiner-example").css('display', 'none'); //数据加载完关闭动画
			$('#count').html("共" + data.page.count + "条数据");

			//ajax刷新页面
			var tpl = document.getElementById('list-template').innerHTML;
			laytpl(tpl).render(data.data, function(html) {
				document.getElementById('list-content').innerHTML = html;
			});
			laypage({
				cont: $('#AjaxPage'), //容器。值支持id名、原生dom对象，jquery对象,
				pages: data.page.lastPage, //总页数
				skip: true, //是否开启跳页
				skin: '#337ab7', //分页组件颜色
				curr: curr || 1,
				first: '首页', //若不显示，设置false即可
				last: '尾页', //若不显示，设置false即可
				groups: 3, //连续显示分页数
				jump: function(obj, first) {
					if(!first) {
						Ajaxpage(obj.curr)
					}
					$('#allpage').html('，第' + obj.curr + '页，共' + '<i>' + obj.pages + '</i>' + '页');
					inputlength();
				}
			});
			if(data.data == '') {
				$("#list-content").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
				$('#allpage').html('');
			}

		});
	}

	//复选框选中
	function checkAll(obj) {
		//alert(obj.checked);
		//获取name=box的复选框
		var userids = document.getElementsByName("box");
		//alert(userids.length);
		for(var i = 0; i < userids.length; i++) {
			userids[i].checked = obj.checked;
		}
	}

	function selectAll() {
		//获取name=box的复选框
		var userids = document.getElementsByName("box");
		var count = 0;
		//遍历所有的复选框
		for(var i = 0; i < userids.length; i++) {
			if(userids[i].checked) {
				count++;
			}
		}
		//选中复选框的个数==获取复选框的个数 
		if(count == userids.length) {
			//设置id为all复选框选中
			document.getElementById("all").checked = true;
		} else {
			//设置id为all复选框不选中
			document.getElementById("all").checked = false;
		}
	}

	//删除(支持批量删)
	function del() {
		var str = [];
		$.each($('input:checkbox:checked'), function() {
			str.push($(this).val());
		});
		$.get("{:url('Customerinfo/delete')}", {
			data: str,
		}, function(flag) {
			Ajaxpage();

		})
	}
	//批量删除弹窗
	function delmseeage(txt, obj) {
		if($('.select').is(':checked')) {
			layer.alert(txt, {
				btn: ['确认', '取消'], //按钮
			}, function() {
				delselected(obj);
				layer.msg('删除成功', {
					time: 1000,
					icon: 1
				});
			});
		} else {
			layer.msg('你还未选中', {
				time: 1000,
				icon: 0
			});
		}
	}

	function delselected(obj) {
		$('.select').each(function() {
			if($(this).is(':checked')) {
				$(this).parents('tr').remove();
			}
		})
	}

	//搜索
	$('#search').click(function() {
		Ajaxpage();
	});

	//选择地址
	function move() {
		var operation = $("#operation").val();
		//        console.log(operation);
		$.get("{:url('Customerinfo/selectAdministrative')}", {
			operation: operation
		}, function(data) {
			$("#administrative").empty();
			$("#administrative").append($("<option>").val("").text("所属行政中心"));
			for(var i = 0; i < data.length; i++) {
				var option = $("<option>").val(data[i].a_id).text(data[i].company_name);
				$("#administrative").append(option);
			}

		})
	}
</script>